<template>
	<div>
		<avue-crud 
			:data        = "data"
			:option      = "Option"
			:page.sync   = "page"
			@refresh-change = "refreshChange"
			@search-change  = "searchChange"
			@row-save    = "rowSave" 
			@row-update  = "rowUpdate" 
			@row-del     = "rowDelete"
			@row-click   = "rowClick"
			@row-dblclick= "rowDBclick"
			@on-load     = "onChangePage"
			@error       = "error">
		</avue-crud>		
	</div>
</template>

<script>
import request from '@/router/axios';
import { baseUrl } from '@/config/env';

export default {
    data() {
        return {
			loading: true,
			classid: 0,
			tablename: "",
			data: [],
			page: { 
				"total": 40, 
				"pagerCount": 5, 
				"currentPage": 1, 
				"pageSize": 10, 
				"pageSizes": [10, 20, 30, 40, 50, 100 ], 
				"layout": "total, sizes, prev, pager, next, jumper", 
				"background": true 
			},
			//全局变量 
			params:{
				//查询条件
				where:{},
				//排序
				sort:{},
				//分页
				page:{limit:10, page: 1}
			},
			Option: {          
				title: '', //表格标题
				rowKey: 'id',
				index: true,
				border: true,
				height: '100%',
				align: 'center',  //表格内容对齐  left/center/right				
				dialogTop: 0,
				dialogHeight: '100%',
				dialogType: 'drawer', //dialog / drawer
				searchMenuSpan: 8,  //搜索框中搜索按钮位置
				//excelBtn: true,   //导出excel
				searchBtn: true,    //过滤按钮 
				dateBtn: false,     //表格 日期输入框
				columnBtn: true,    //列隐藏
				refreshBtn: false,  //刷新按钮
				//filterBtn: true,  //自定义筛选
				//printBtn: true,   //打印
				selection: false,   //行选
				size: 'mini', 
				stripe: true,       //斑马纹
				menu: true,         //行菜单
				menuAlign: 'center',
				menuType: 'text',   //行菜单,button/icon/text/menu
				menuWidth: 130,     //行菜单宽度，缺省240
				column:[]
			}
		}
    },
	mounted() {
		// this.$message.success(`activated`);
		
		this.getColumnt();
		//this.$message.success(JSON.stringify(this.$route.$avueRouter));
	},
	activated(){
		//this.$message.success(JSON.stringify(this.$route.params));
		//this.$message.success(this.$route.params.classid);		
	},
	watch: {
		$route(){
			// 对路由变化作出响应...
			this.classid   = this.$route.classid;
			this.tablename = this.$route.table;
			this.getColumnt();
			this.getList();
		}
    },
    methods: {		
		getColumnt(){
			//this.loading = true;
			let url = baseUrl + '/vue/getTableColumnt/' + this.classid + '/' + this.tablename;  
			this.$message.success(url);
			request({
				method: 'GET',
				url: url,
				data: {}            
			})
			.then((res)=> {
				this.Option.column = res.data;
				//this.loading = false;
			})
		},
		getList() {
			let url = baseUrl + '/vue/getJson/' + this.classid + '/' + this.tablename; 
			request({
				method: 'GET',
				url: url,
				params:{
					where: JSON.stringify(this.params.where),
					page:  JSON.stringify(this.params.page),
					sort:  JSON.stringify(this.params.sort)
				} 
			})
			.then((res)=>{
				this.page.total = res.data.total;
				this.page.currentPage = res.data.page;
				this.data = res.data.data;
			})
		},
		error(err){
			console.log(err)
		},
		rowSave(form, done){
			//新增数据   
			this.$message.success('新增数据'+ JSON.stringify(form));
			done(form);
			this.getList();		
		},
		rowUpdate(row,index,done,loading){
			//修改数据
			//loading = true;
			console.log(JSON.stringify(row));
			
			//this.getList();
			//禁用表单
			loading();
			//关闭关单
			done(row);
		},
		rowDelete(row, index){
			this.$message.success('删除');
			//let url = baseUrl + '/vue/delete/'
		},
		rowClick(row, event, column){
			//this.$message.success('单击');
		},
		rowDBclick(row, column){
			//this.$message.success('双击');
		},
		searchChange(params, done) {
			done();
			this.params.where = params;
			this.params.page.page = 1;
			//this.pag.currentPage  = 1;
			this.getList();
		},
		refreshChange() {
			this.loading = true;
			this.getList();
			this.loading = false;
		},
		onChangePage(page){
			this.loading = true;
			this.params.page.limit = page.pageSize;
			this.params.page.page  = page.currentPage;
			this.getList();		
			this.loading = false;	
			console.log('onChangePage');
		}
    }
}
</script>

<style>
</style>
